<!doctype html>
<html lang="zh-CN" th:fragment="layout (title, style, link, script, content, active)"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title th:replace="${title}"></title>

    <!-- Bootstrap -->
    <link th:href="@{/common/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <!--BootstrapTable-->
    <link rel="stylesheet" href="/common/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/custom/css/web/sticky-footer.css">
    <link th:href="@{/custom/css/style.css}" rel="stylesheet">
    <link th:href="@{/custom/css/web-style.css}" rel="stylesheet">
    <link href="/custom/css/style.css" rel="stylesheet">
    <th:block th:replace="${link}"/>
    <th:block th:replace="${style}"/>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script th:src="@{/common/bootstrap/js/html5shiv.min.js}"></script>
    <script th:src="@{/common/bootstrap/js/respond.min.js}"></script>
    <![endif]-->
</head>
<body>
<div>
    <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:href="@{/user/exam/list}">迷你考试</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li th:class="${active}=='userExam'?'active'"><a th:href="@{/user/exam/list}">我的考试</a></li>
                    <li th:class="${active}=='user'?'active'"><a th:href="@{/user/info}">个人信息</a></li>
                    <li th:if="${loginUser}!=null and ${loginUser.type}=='A'"><a th:href="@{/admin/exam/list}">进入后台</a>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control search-text" placeholder="考试名称">
                    </div>
                    <span class="btn btn-default btn-search">搜索</span>
                </form>
                <!-- Single button -->
                <div class="navbar-right" style="margin-top: 8px;">
                    <a th:href="@{/login}" th:if="${loginUser}==null" class="btn btn-default">登录</a>
                    <div class="btn-group" th:if="${loginUser}!=null">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            [[${loginUser.showName}]] <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="updatePassword fyl-cp">修改密码</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a th:href="@{/logout}">退出</a></li>
                        </ul>
                    </div>
                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container">
        <!--<div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
                content or information.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>-->
        <th:block th:replace="${content}"></th:block>
        <!--<hr>
        <p>Copyright 2022 by Gc</p>-->
    </div>
    <footer class="footer">
        <div class="container">
            <p class="text-muted">Copyright 2022 by Gc</p>
        </div>
    </footer>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script th:src="@{/common/bootstrap/js/jquery.min.js}"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/common/bootstrap/js/bootstrap.min.js}"></script>
<!--BootstrapTable-->
<script src="/common/bootstrap/js/bootstrap-table.min.js"></script>
<script src="/common/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
<script th:src="@{/common/layer/layer.js}"></script>
<script th:src="@{/common/md5.js}"></script>
<script th:src="@{/common/jquery/lazyload/jquery.lazyload.min.js}"></script>
<script th:src="@{/custom/js/webutils.js}"></script>
<script th:src="@{/custom/js/common.js}"></script>
<th:block th:replace="${script}"/>
</body>
</html>